<template>
  <div class="menu">
		<component
			:is="currentHouse"
			@onChange="toPage({ path: 'building' })"
			:detail="buildingInfo"
		/>

		<div
			class="item"
			:key="item.name"
			v-for="item in list"
			@click="toPage(item)"
			:style="{background: item.bg}"
		>
			<van-image :src="item.icon" />
			<div class="text">
				<p class="font-weight">{{ item.name }}</p>
			</div>
		</div>

		<div class="btns">
			<van-button
				round
				block
				type="primary"
				native-type="submit"
				@click="toPage({ path: 'bind' })"
			>
				添加房屋
			</van-button>
      
      <component
        :is="phonePopup"
      />
		</div>
	</div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import currentHouse from './components/currentHouse'
import { useBuildingStore, useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { exitFormat, getMonthNumber } from '@/service/api'
import { Dialog } from 'vant'
import phonePopup from '@/components/phonePopup'

const buildingStore  = useBuildingStore()

const { buildingInfo } = storeToRefs(buildingStore)

const router = useRouter()
const route = useRoute()

const list = ref([
	{
		name: '隐患自查',
		icon: require('./image/icon_1.png'),
		path: 'inspection-data-collection',
		bg: '#FF505A',
	},
	{
		name: '隐患整改',
		icon: require('./image/icon_2.png'),
		path: 'inspection-trouble',
		bg: '#FFAE49',
	},
	{
		name: '自查记录',
		icon: require('./image/icon_3.png'),
		path: 'inspection-check-self',
		bg: '#FFA273',
	}
])

const toPage = record => {
	router.push({
		name: record.path,
		query: {
			...route.query,
			from: 'menu'
		}
	})
}

const getFormat = async () => {
	const result = await exitFormat({
		fwbh: buildingInfo.value?.fwbh
	})
	if (result?.succ && result?.msg) {
		Dialog.alert({
			message: result?.msg,
		})
	}
}

const getSessionStorage = (key) => {
	const data = sessionStorage.getItem(key)
	return data && JSON.parse(data) || {}
}


onMounted(() => {
	const exitData = getSessionStorage('exit')
	if (exitData[buildingInfo.value?.fwbh]) {
		//
	} else {
		getFormat()
		exitData[buildingInfo.value?.fwbh] = 1
		sessionStorage.setItem('exit', JSON.stringify(exitData))
	}
})
</script>

<style scoped lang="less">
.menu {
	position: relative;
	height: 100%;
	background: url(image/page_bg.png) no-repeat top center / 100% 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	box-sizing: border-box;
	h3 {
		font-size: 34px;
	}
	.item {
		display: flex;
		align-items: center;
		width: calc(100% - 80px);
		height: 140px;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 0 40px;
		.van-image {
			width: 98px;
			height: 98px;
		}
		.text {
			width: 0;
			flex: 1;
			margin-left: 36px;
			p {
				flex: 1;
				height: 44px;
				line-height: 44px;
				color: #fff;
				font-size: 36px;
			}
		}
	}
	.btns {
		width: calc(100% - 64px);
		position: absolute;
		bottom: 32px;
		left: 32px;
	}
}
</style>
